<script lang="ts" setup>
import { ref, computed } from 'vue'

// 获取父组件传过来的渲染数据
const props = withDefaults(
  defineProps<{
    item: any
    goods: any
  }>(),
  {
    item: {
      type: Object,
      default: () => {},
    },
    goods: { type: Boolean, default: true },
  },
)
const emits = defineEmits(['goPay', 'triggerRules'])
/** 改变套餐盒子的透明度*/
const changeBoxBgc = computed(() => {
  if (props.goods) {
    return props.item.stocks <= 0 ? 'stocksIF' : ''
  } else {
    return props.item.currentStock <= 0 || !props.item.canBuy ? 'stocksIF' : ''
  }
})
/** 改变按钮背景色 */
const changeButtonBgc = computed(() => {
  if (props.goods) {
    return props.item.stocks <= 0 ? 'SoldOut' : ''
  } else {
    return props.item.currentStock <= 0 || !props.item.canBuy ? 'SoldOut' : ''
  }
})
/** 改变文字 */
const changeButtonText = computed(() => {
  if (props.goods) {
    return props.item.stocks <= 0 ? '已售罄' : '选规格'
  } else {
    return props.item.currentStock <= 0 ? '已售罄' : '抢购'
  }
})
/**套餐类型的样式 */
const changeTagStyle = computed(() => {
  if (!props.item.appletComboInfoDto?.tagComboList) return ''
  return props.item.appletComboInfoDto?.tagComboList[0]?.tagName === '限时'
    ? 'timeLimit'
    : props.item.appletComboInfoDto?.tagComboList[0]?.tagName === '热销'
    ? 'Hot'
    : ''
})
/**套餐类型的样式 */
const changeCouponTagStyle = computed(() => {
  if (!props.item.tagName) return ''
  return props.item.tagName === '限时' ? 'timeLimit' : props.item.tagName === '热销' ? 'Hot' : ''
})
/** tag 套餐类型文字 */
const changeTagText = computed<string>(() => {
  return props.item.appletComboInfoDto.tagComboList
    ? props.item.appletComboInfoDto.tagComboList[0]?.tagName
    : '推荐'
})
/** 套餐的数量 小于三份并且大于0份 的时候提示用户判断值 */
const chengaIsTip = computed(() => {
  return props.item.stocks <= 3 && props.item.stocks > 0 ? true : false
})
/**跳转到详情页面 */
const skipDetailsPage = (obj: any) => {
  if (obj.stocks == 0) return // 当库存为0 时 不进行点击跳转
  const items = encodeURIComponent(JSON.stringify(obj))
  uni.navigateTo({
    url: `/pagesEat/detailsPage/detailsPage?items=${items}`,
  })
}

/** 触发规则组件 */
const triggerRules = () => {
  emits('triggerRules', props.item)
}

const goPay = () => {
  if (!props.item.currentStock || !props.item.canBuy) return
  if (props.item.currentStock > 0 && props.item.canBuy) {
    emits('goPay', props.item)
  }
}
// /**
//  *
//  * @param mergeFn   遍历获取营养成分表方法
//  */
// const mergeFn = (item: any) => {
//   return item
//     .map((e: any) => {
//       return e.goodsNutritive.nutritive + e.goodsNutritive.value
//     })
//     .join(', ')
// }
</script>

<template>
  <view>
    <view v-if="goods" ref="_item" class="item" :class="changeBoxBgc" @tap="skipDetailsPage(item)">
      <!-- 套餐图片 -->
      <view class="itemImage">
        <image
          class="_image"
          :src="
            item.appletComboInfoDto.thumbUrl + '?x-oss-process=image/resize,h_300,m_lfit' ||
            ``
          "
          mode="scaleToFill"
        />
      </view>
      <!-- 右侧套餐说明 -->
      <view class="rightExplain">
        <view class="nameWrapper">
          <view class="tag" :class="changeTagStyle"
            ><image src="/static/images/eat/fire.png" mode="scaleToFill" />{{ changeTagText }}</view
          >
          <view class="name">
            {{ item?.appletComboInfoDto?.comboName }}
          </view>
          <view class="imageWrapper" v-if="item?.appletComboInfoDto?.tastes?.spicy">
            <image
              v-for="(i, index) in item?.appletComboInfoDto?.tastes?.spicy - 1"
              :key="index"
              class="image"
              src="../static/images/Frame.png"
            />
            <image
              v-for="(i, index) in 4 - item?.appletComboInfoDto?.tastes?.spicy"
              :key="index"
              class="image"
              src="../static/images/Frame2.png"
            />
          </view>
        </view>
        <!-- <view class="heat" v-if="false"
        >营养成分表（每份）：{{ mergeFn(item.appletComboInfoDto.goodsData) }}
      </view> -->
        <view class="chartlet">
          <view class="limit" v-if="chengaIsTip">仅剩{{ item?.stocks }}份</view>
        </view>
        <view class="price">
          <view v-if="item?.appletComboInfoDto?.marketing?.clientCouponId" class="discountPrice">
            <view class="symbol">￥</view>
            {{ Number(item?.appletComboInfoDto?.marketing?.discountedAfterPrice).toFixed(2)
            }}<view class="estimated_arrival">预估到手</view>
          </view>
          <view
            class="originalPrice"
            :style="{
              color: item?.appletComboInfoDto?.marketing?.clientCouponId ? '#B3B3B3' : '#f14b4b',
              fontSize: item?.appletComboInfoDto?.marketing?.clientCouponId ? '40rpx' : '40rpx',
            }"
          >
            <view class="symbol">￥</view
            >{{ Number(item?.appletComboInfoDto?.marketing?.deviceAmount).toFixed(2) }}</view
          >
          <view class="select" :class="changeButtonBgc" @click="goPay">{{ changeButtonText }}</view>
        </view>
      </view>
    </view>
    <view v-else ref="_item2" class="item" :class="changeBoxBgc" @click.stop="triggerRules">
      <!-- 套餐图片 -->
      <view class="itemImage">
        <image
          class="_image"
          :src="item.shopImg || ``"
          mode="scaleToFill"
        />
      </view>
      <!-- 右侧套餐说明 -->
      <view class="rightExplain">
        <view class="nameWrapper">
          <view class="tag" :class="changeCouponTagStyle">
            <image src="/static/images/eat/fire.png" mode="scaleToFill" />{{ item.tagName }}
          </view>
          <view class="name">
            {{ item.name }}
          </view>
        </view>
        <!-- <view class="heat" v-if="false"
        >营养成分表（每份）：{{ mergeFn(item.appletComboInfoDto.goodsData) }}
      </view> -->
        <view class="chartlet">
          <view class="limit" v-if="item.currentStock <= 3 && item.currentStock > 0"
            >仅剩{{ item.currentStock }}份</view
          >
        </view>
        <view class="price">
          <view
            class="originalPrice"
            :style="{
              color: '#000',
              fontSize: '40rpx',
            }"
          >
            <view class="symbol">￥</view>{{ Number(item.price).toFixed(2) }}</view
          >
          <view class="select" :class="changeButtonBgc" @tap.stop="goPay">{{
            changeButtonText
          }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
// 循环套餐 item
.item {
  display: flex;
  width: 590rpx;
  height: 240rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(153, 153, 153, 0.16);
  padding: 40rpx;
  padding-left: 120rpx;
  &:last-child {
    margin-bottom: 20rpx;
  }
  position: relative;
  .itemImage {
    display: flex;
    justify-content: center;
    // background-image: url('/static/images/eat_food_bg.png');
    background-size: cover; /* 设置背景图大小适应容器 */
    background-position: center; /* 设置背景图位置居中 */
    margin-right: 16rpx;
    width: 200rpx;
    height: 200rpx;
    border-radius: 20rpx;
    position: absolute;
    top: calc(50% - 100rpx);
    left: -100rpx;
    ._image {
      width: 200rpx;
      height: 200rpx;
      border-radius: 20rpx;
    }
  }
}
.stocksIF {
  opacity: 0.7;
}
// 右侧套餐说明
.rightExplain {
  width: 100%; // 父级盒子自定义宽度
  .nameWrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .tag {
      margin-right: 12rpx;
      padding: 0 8rpx;
      height: 36rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 6rpx;
      color: #fff;
      background-color: $uni-color-motif;
      font-size: 24rpx;
      image {
        width: 20rpx;
        height: 20rpx;
        margin-right: 6rpx;
      }
    }
    .name {
      height: 40rpx;
      line-height: 40rpx;
      font-size: 32rpx;
      color: #000;
      // width: 100%; // 必定设置宽度
      white-space: nowrap; /* 防止换行 */
      overflow: hidden; /* 限制溢出内容隐藏 */
      text-overflow: ellipsis; /* 使用省略号 */
    }
    .imageWrapper {
      flex-shrink: 0;
      flex-grow: 1;
      min-width: 72rpx;
      margin-left: 4rpx;
      display: flex;
      .image {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }
  .heat {
    width: 100%; // 必定设置宽度
    white-space: nowrap; /* 防止换行 */
    overflow: hidden; /* 限制溢出内容隐藏 */
    text-overflow: ellipsis; /* 使用省略号 */
    margin: 8rpx 0;
    height: 38rpx;
    font-size: 22rpx;
    color: #00000080;
  }
  .chartlet {
    display: flex;
    align-items: center;
    height: 36rpx;
    font-size: 24rpx;
    margin: 20rpx 0;

    .timeLimit {
      color: #e14949;
      background-color: #fff6f6;
    }
    .Hot {
      color: #ff9c09;
      background-color: #fff5e5;
    }
    .limit {
      color: #cfd1d1;
      font-size: 28rpx;
    }
  }
  .price {
    position: relative;
    height: 50rpx;
    display: flex;
    align-items: center;
    .discountPrice {
      font-family: 'Rowdies';
      font-size: 32rpx;
      color: #f14b4b;
      margin-right: 8rpx;
      font-weight: 400;
      display: flex;
      align-items: center;
      .symbol {
        font-size: 24rpx;
      }
      .estimated_arrival {
        margin-left: 10rpx;
        font-size: 20rpx;
      }
    }
    .originalPrice {
      display: flex;
      align-items: center;
      font-family: 'Rowdies';
      font-weight: bold;
      font-size: 40rpx;
      color: #000000;
      .symbol {
        margin-top: 10rpx;
        margin-right: 6rpx;
        font-size: 24rpx;
        color: $uni-color-motif;
      }
    }
    .select {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 124rpx;
      height: 50rpx;
      line-height: 50rpx;
      text-align: center;
      font-size: 28rpx;
      color: #fff;
      background-color: $uni-color-motif;
      border-radius: 30rpx;
    }
    .SoldOut {
      background: #b3b2b2;
    }
  }
}
</style>
